import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // ES6
import styles from './index.less';

const uuid =require('uuid/v4');


interface Props {
    onChange: Function
    value?: string
}
interface State {
    id: String
}
class Editor extends React.Component<Props, State> {
    state = {
        id: uuid()
    }
    modules = {
        toolbar: [
            { 'header': [1, 2, false] },
            { 'color': [] }, { 'background': [] },
            'bold',
            'italic',
            'underline',
            'strike',
            'blockquote',
            { 'list': 'ordered' },
            { 'list': 'bullet' },
            'link', 'clean'
        ]
    }
    formats = [
        'bold', 'italic', 'underline', 'link',
        'list', 'code-block',
        'color', 'background',
        'size', 'image',
        'direction', 'indent', 'clean',
        'header', 'align', 'video', 'blockquote', 'strike', 'script'
    ]
    handleChange(content:any) {
        this.props.onChange(content);
    }
    ref = (instance:any) => {
        console.log(instance);
    }
    render() {
        return (
            <div className={styles.textEditor}>
                <ReactQuill
                    id={this.state.id}
                    ref={(c:any) => { this.ref = c; }}
                    theme='snow'
                    placeholder='请输入内容...'
                    readOnly={false}
                    modules={this.modules}
                    value={this.props.value}
                    onChange={this.handleChange.bind(this)}
                />
            </div>
        );
    }
}

export default Editor;
